<!--再建项目库-->
<template>
<div>
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
    <el-form-item label="项目类型" prop="entryType">
      <el-select v-model="queryParams.entryType" placeholder="项目类型" clearable>
        <el-option
          v-for="item in entryTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item style="float: right">
      <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
      <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
  <a :style="{fontSize: '16px',fontWeight:'bold'}" @click="toggle">
    <i class="el-icon-arrow-up" v-if="isShowTitle"></i>
    <i class="el-icon-arrow-down" v-if="!isShowTitle"></i>
  </a>
  <div v-if="isShowTitle">
    <div class="table-title">项目类型状态统计-负责项目</div>
    <div class="left-msg">数据源： 项目档案<span style="margin-left: 10px">统计日期： {{currentTime}} </span></div>
  </div>
  <el-table :data="tableData" border style="width: 100%;" @cell-click="cellClick">
    <el-table-column prop="entryType" label="项目类型"></el-table-column>
    <el-table-column prop="underProject" label="在建项目"></el-table-column>
    <el-table-column prop="suspendProject" label="暂停项目"></el-table-column>
    <el-table-column prop="stopProject" label="终止项目"></el-table-column>
    <el-table-column prop="completeProject" label="完成项目"></el-table-column>
    <el-table-column prop="totalProject" label="负责项目总数"></el-table-column>
    <el-table-column prop="delayedProject" label="其中：在建延期项目"></el-table-column>
  </el-table>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="60%"
    append-to-body
  >
    <el-table :data="tableData1" border style="width: 100%;">
      <el-table-column prop="entryType" label="项目类型"></el-table-column>
      <el-table-column prop="random" :label="label"></el-table-column>
    </el-table>
  </el-dialog>
</div>
</template>

<script>
//import moment from "moment";
export default {
  name: 'projectLibrary',
  data(){
    return{
      queryParams: {
        entryType: undefined
      },
      entryTypeOptions: [
        { label: '防沙治沙', value: '0' },
        { label: '植树造林', value: '1' },
        { label: '绿化改造', value: '2' },
        { label: '机器人造林', value: '3' }
      ],
      tableData:[
        {
          entryType:'防沙治沙',
          underProject:'1',
          suspendProject:'0',
          stopProject:'',
          completeProject:'',
          totalProject:'',
          delayedProject:''
        },
        {
          entryType:'植树造林',
          underProject:'1',
          suspendProject:'',
          stopProject:'0',
          completeProject:'',
          totalProject:'',
          delayedProject:''
        },
        {
          entryType:'绿化改造',
          underProject:'1',
          suspendProject:'0',
          stopProject:'',
          completeProject:'',
          totalProject:'3',
          delayedProject:'0'
        },
        {
          entryType:'机器人造林',
          underProject:'1',
          suspendProject:'',
          stopProject:'',
          completeProject:'',
          totalProject:'',
          delayedProject:''
        }
      ],
      currentTime: '',//moment().format('YYYY-MM-DD HH:mm:ss'),
      isShowTitle:false,
      dialogTitle:'',
      dialogVisible:false,
      label:'',
      entryType:'',
      tableData1:[]
    }
  },

  methods:{
    //查询
    handleQuery() {
      //this.getList();
    },
    //重置
    resetQuery() {
      this.resetForm('queryForm')
    },
    toggle(){
      this.isShowTitle = !this.isShowTitle
    },
    //单元格点击事件
    cellClick(row, column, cell, event){
      this.dialogTitle = row.entryType + column.label
      this.label = column.label
      this.entryType = row.entryType
      this.tableData1 =[]
      this.tableData1.push({
        entryType:row.entryType,
        random:'泰和公司园林施工项目'
      })
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.table-title{
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.left-msg{
  margin-bottom: 10px;
}
</style>
